<template>
  <div class="e-wrap">
    <div class="e-filter-options clearfix">
      <div class="e-filter">
        <div class="e-item">
          <span class="title">广告名称</span>
          <div class="date dis-block">
            <w-input :holder='`请填写`' v-model='queryParams.adTitle'></w-input>
          </div>
        </div>
      </div>
      <div class="e-btn">
        <w-button @on-click='changePage(1)'>搜索</w-button>
      </div>
    </div>
    <!-- 广告列表 -->
    <div class="e-list clearfix" v-if='advertList.totalCount'>
      <table>
        <tr class="table-h">
          <th>广告名称</th>
          <th>所属广告位</th>
          <th>类别</th>
          <th>开始时间</th>
          <th>结束时间</th>
          <!-- <th>点击次数</th> -->
          <th>广告状态</th>
          <th>广告上传操作人</th>
          <th>操作</th>
        </tr>
        <tr v-for='(val, index) in advertList.recordList' :key='index'>
          <td>{{val.adTitle}}</td>
          <td>{{val.adApTitle}}</td>
          <!-- <td>{{val.apType}}</td> -->
          <td v-if="val.apType == 'img'">图片</td>
          <td v-else-if="val.apType == 'slide'">幻灯片</td>
          <td v-else-if="val.apType == 'bg_slide'">背景幻灯片</td>
          <td v-else-if="val.apType == 'scroll'">滚动</td>
          <td v-else-if="val.apType == 'text'">文字</td>
          <td v-else></td>
          
          <td>{{val.adBeginTime}}</td>
          <td>{{val.adEndTime}}</td>
          <!-- <td>{{val.adClickNum || 0}}</td> -->
          <td>{{val.adStatus == '1' ? '审核通过' : val.adStatus == '-1' ? '审核未通过' : '待审核'}}</td>
          <td>{{val.adUserName}}</td>
          <td>
            <span class="cur" @click="getAdvertInfo(val.id, val.adApTitle)">审批 |</span>
            <span class="cur" @click="delPanel = true; delParams.idList = [val.id]">删除</span>
          </td>
        </tr>
      </table>
      <!-- 分页 -->
      <div class="fr" style="margin-top: 55px">
        <w-paging :current="advertList.currentPage" :total="advertList.pageCount" @on-page='changePage'></w-paging>
      </div>
    </div>

    <!-- 无数据 -->
    <div class="e-list" v-else>
      <table>
          <tr class="table-h">
            <th>广告名称</th>
            <th>所属广告位</th>
            <th>类别</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <!-- <th>点击次数</th> -->
            <th>广告状态</th>
            <th>广告上传操作人</th>
            <th>操作</th>
          </tr>
          <tr>
            <td colspan='8'>暂无数据</td>
          </tr>
      </table>
    </div>

    <!-- 审批 -->
    <w-panel-fixed-wrap v-model="applying" :panel-title="true" title="审核" :width="`460px`" :height="`525px`" @on-confirm='applyOption'>
      <div class="apply-panel">
        <table>
            <tr>
              <td>广告名称</td>
              <td>{{advInfo.adTitle}}</td>
            </tr>
            <tr>
              <td>广告位置</td>
              <td>{{advInfo.adApTitle}}</td>
            </tr>
            <tr>
              <td>开始时间</td>
              <td>{{advInfo.adBeginTime}}</td>
            </tr>
            <tr>
              <td>结束时间</td>
              <td>{{advInfo.adEndTime}}</td>
            </tr>
            <tr>
              <td style="vertical-align: top;">广告图片</td>
              <td><img v-lazy='advInfo.adPath' alt=""></td>
            </tr>
            <tr>
              <td>幻灯片序号</td>
              <td>{{advInfo.adSlideSequence}}</td>
            </tr>
            <tr>
              <td>图片链接</td>
              <td width='267px'>{{advInfo.adPath}}</td>
            </tr>
            <tr>
              <td>广告状态</td>
              <td>
                <w-radio :label='1' name='state' v-model="applyParams.adStatus">审核通过</w-radio>
                <w-radio :label='0' name='state' v-model="applyParams.adStatus">等待审核</w-radio>
                <w-radio :label='-1' name='state' v-model="applyParams.adStatus">审核失败</w-radio>
              </td>
            </tr>
        </table>
      </div>
    </w-panel-fixed-wrap>

    <!-- 删除广告 -->
    <w-panel-fixed-wrap v-model="delPanel"  :panel-title="true" title="删除广告" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除该广告
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiDecorateMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      applying: false,
      delPanel: false,
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        adTitle: '',
        adStatus: '0',
        currentPage: 1,
        showCount: 10
      },
      advertList: {},
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        idList: []
      },
      infoParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: ''
      },
      advInfo: {},
      applyParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: '',
        adTitle: '',
        adApId: '',
        adStatus: ''
      }
    }
  },
  computed: {
    ...mapGetters(['token', 'adsList'])
  },
  created() {
    this._getAdvertList()
  },
  methods: {
    // 获取 广告 列表
    _getAdvertList() {
      this.queryParams.accessToken = this.token
      apiDecorateMange.getAdvertList(this.queryParams).then(data => {
        this.advertList = data.data
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getAdvertList()
    },
    delOption(page) {
      this.delParams.accessToken = this.token
      apiDecorateMange.delAdvert(this.delParams).then(data => {
        if (data.code != 200) return
        this.$toast('删除成功', () => {
          this.delPanel = false
          this.changePage(1)
        })
      })
    },
    // 获取 广告信息
    getAdvertInfo(id, title) {
      this.infoParams.accessToken = this.token
      this.infoParams.id = id
      apiDecorateMange.getAdvertInfo(this.infoParams).then(data => {
        this.advInfo = data.data.advertInfo
        this.advInfo.adApTitle = title
        this.applying = true
      })
    },
    // 审批
    applyOption() {
      this.applyParams.accessToken = this.token
      this.applyParams.adTitle = this.advInfo.adTitle
      this.applyParams.adApId = this.advInfo.adApId
      this.applyParams.id = this.infoParams.id
      apiDecorateMange.addAdvert(this.applyParams).then(data => {
        if (data.code != 200) return
        this.$toast('审批成功', () => {
          this.applying = false
          this._getAdvertList()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-filter-options {
  padding-bottom: 20px;
}
.e-item {
  margin-left: 0;
  margin-right: 20px;
  .dis-block {
    width: 240px;
    vertical-align: middle;
  }
}
.e-filter-list {
  width: 100%;
}
.apply-panel {
  tr {
    height: 40px;
    img {
      width: 54px;
      height: 54px;
    }
    & td:first-child {
      text-align: right;
      padding-right: 30px;
    }
  }
}
</style>